<template>
    <div id="detail">
        <DetailNavBarVue ref="nav" @titleClick="titleClick" class="detail-nav"></DetailNavBarVue>
        <ScrollVue :probeType="3" @scroll="contentScroll" class="content" ref="scroll">
            <DetailSwiperVue :topImages="topImages"></DetailSwiperVue>
            <DetailBaseInfoVue :goods="goods"></DetailBaseInfoVue>
            <DetailShopInfoVue ref="shop" :shop="shop"></DetailShopInfoVue>
            <DetailGoodsInfoVue ref="goods" @imageLoad="imageLoad" :detailInfo="detailInfo"></DetailGoodsInfoVue>
            <DetailParamInfoVue ref='params' :paramInfo="paramInfo"></DetailParamInfoVue>
            <!-- <DetailRecommendInfoVue></DetailRecommendInfoVue>
            <DetailCommentInfoVue></DetailCommentInfoVue> -->
        </ScrollVue>
        <DetailBottomBarVue @addToCart="addToCart"></DetailBottomBarVue>
        <BackTopVue @click.native="backTop" v-show="isShowBackTop"></BackTopVue>
    </div>
</template>

<script>
import DetailNavBarVue from './childComps/DetailNavBar.vue'
import DetailSwiperVue from './childComps/DetailSwiper.vue'
import DetailBaseInfoVue from './childComps/DetailBaseInfo.vue'
import DetailShopInfoVue from './childComps/DetailShopInfo.vue'
import DetailGoodsInfoVue from './childComps/DetailGoodsInfo.vue'
import DetailParamInfoVue from './childComps/DetailParamInfo.vue'
import DetailBottomBarVue from './childComps/DetailBottomBar.vue'
import BackTopVue from '@/components/content/backTop/BackTop.vue'
// import DetailRecommendInfoVue from './childComps/DetailRecommendInfo.vue'
// import DetailCommentInfoVue from './childComps/DetailCommentInfo.vue'

import ScrollVue from '@/components/common/scroll/Scroll.vue'

import { getDetail, Goods, Shop, GoodsParam } from '../../network/detail'
import { debounce } from '@/components/common/utils'

export default {
    name: 'Detail',
    data() {
        return {
            iid: null,
            topImages: null,
            goods: {},
            shop: {},
            detailInfo: {},
            paramInfo: {},
            itemParams: {},
            commentInfo: {},
            recommends: [],
            themeTopYs: [],
            getThemeTopY: null,
            currentIndex : 0,
            isShowBackTop: false
        }
    },
    methods: {
        imageLoad() {
            this.$refs.scroll.refresh()
            this.getThemeTopY()
        },
        titleClick(index) {
            console.log(index);
            this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 200)
        },
        contentScroll(position){
            // 判断backtop是否显示
            if (position.y > -1000) {
                this.isShowBackTop = false
            }
            else {
                this.isShowBackTop = true
            }
            const positionY = -position.y
            let length = this.themeTopYs.length
            for(let i = 0; i < length; i++){
                if(this.currentIndex != i && ((i < length - 1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]) 
                    || (i === length -1 && positionY >= this.themeTopYs[i]))){
                        this.currentIndex = i
                        this.$refs.nav.currentIndex = this.currentIndex
                    }
            }
        },
        backTop(){
            this.$refs.scroll.scrollTo(0,0,300)
        },
        addToCart(){
            const product = {}
            product.image = this.topImages[0]
            product.title = this.goods.title
            product.desc = this.goods.desc
            product.price = this.goods.realPrice
            product.iid = this.iid

            this.$store.dispatch('addCart',product).then(res => {
                this.$toast.show(res,2000)
            })
        }
    },
    created() {
        this.iid = this.$route.params.iid
        getDetail(this.iid).then(res => {
            const data = res.result
            this.topImages = data.itemInfo.topImages
            this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
            this.shop = new Shop(data.shopInfo)
            this.detailInfo = data.detailInfo
            this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)
        }).catch(err => {
            console.log(err)
        })
        this.getThemeTopY = debounce(() => {
            this.themeTopYs = []
            this.themeTopYs.push(0),
                this.themeTopYs.push(this.$refs.shop.$el.offsetTop)
            this.themeTopYs.push(this.$refs.goods.$el.offsetTop)
            this.themeTopYs.push(this.$refs.params.$el.offsetTop)
            // console.log(this.themeTopYs)
        },100)
    },
    mounted() {
        this.themeTopYs.push(0),
            this.themeTopYs.push(this.$refs.shop.$el.offsetTop)
        this.themeTopYs.push(this.$refs.goods.$el.offsetTop)
        this.themeTopYs.push(this.$refs.params.$el.offsetTop)
    },
    components: {
        DetailNavBarVue,
        DetailSwiperVue,
        DetailBaseInfoVue,
        DetailShopInfoVue,
        DetailGoodsInfoVue,
        GoodsParam,
        DetailParamInfoVue,
        ScrollVue,
        DetailBottomBarVue,
        BackTopVue
        // DetailRecommendInfoVue,
        // DetailCommentInfoVue
    }
}
</script>

<style scoped>
#detail {
    position: relative;
    z-index: 11;
    background-color: #fff;
    height: 100vh;
}

.content {
    height: calc(100% - 44px);
}

.detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
}
</style>